<template>
	<div>
		<el-row :span="24" style="margin:26px 0;">
		     <el-button  @click="goBack()" type="primary" >返回</el-button>
		</el-row>
		<div>
			  <el-tabs v-model="activeName" @tab-click="handleClick">
			    <el-tab-pane label="商品收入" name="first">
					<el-table
					        :data="pageInfo.markerIncomeListDtos"
					        border
					        stripe
					        style="width: 100%;margin-top:10px;">
					    <el-table-column
					            prop="creTime" 
					            label="日期">
					     
					    </el-table-column>
					    <el-table-column
					            label="订单数"
								prop="quantity">
					
					    </el-table-column>
					    <el-table-column
					            label="订单金额"
								prop="amount">
					    </el-table-column>
						<el-table-column
						        label="奖励券收入"
								prop="offset">
						</el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange"
					            :current-page="pageInfo.pageNum"
					            :page-size="pageInfo.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo.count"
					            >
					    </el-pagination>
					</div>
				</el-tab-pane>
			    <el-tab-pane label="创客收入" name="second">
					<el-table
					        :data="pageInfo2.markerIncomeListDtos"
					        border
					        stripe
					        style="width: 100%;margin-top:10px;">
					    <el-table-column
					            prop="creTime" 
					            label="日期">
					     
					    </el-table-column>
					    <el-table-column
					            label="订单数"
								prop="quantity">
					
					    </el-table-column>
					    <el-table-column
					            label="订单金额"
								prop="amount">
					    </el-table-column>
						<el-table-column
						        label="抵用券收入"
								prop="offset">
						</el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange2"
					            :current-page="pageInfo2.pageNum"
					            :page-size="pageInfo2.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo2.count"
					            >
					    </el-pagination>
					</div>
				</el-tab-pane>
			    <el-tab-pane label="订单明细" name="third">
					<el-row style="padding-top: 20px;">
					    <el-col :span="24">
					        <el-form :inline="true" :model="formInline3" class="demo-form-inline" label-width="100px">
					            <el-form-item label="按交易状态:">
					                    <el-select v-model="formInline3.orderStat">
					                        <el-option label="全部" value=""></el-option>
					                        <el-option v-for="item in orderStatList" :label="item.label" :value="item.value"></el-option>
					                    </el-select>
									
					            </el-form-item>
								<el-button type="primary" @click="fetchData3(1)">查询</el-button>
					        </el-form>
					    </el-col>
					</el-row>
					<el-table
					        :data="pageInfo3.lists"
					        border
					        stripe
					        style="width: 100%;margin-top:10px;">
					    <el-table-column
					            prop="goodsName" 
					            label="商品名称">
					    </el-table-column>
					    <el-table-column
					            label="数量"
								prop="goodsNum">
					    </el-table-column>
						<el-table-column
						        label="成交金额"
								prop="orderAmt">
						</el-table-column>
						<el-table-column
						        label="预计奖励券收入"
								prop="changeValue">
						</el-table-column>
						<el-table-column
						        label="下单时间"
								prop="creTime">
						</el-table-column>
						<el-table-column
						        label="结算时间"
								prop="payTime">
						</el-table-column>
						<el-table-column
						        label="完成时间"
								prop="okTime">
						</el-table-column>
						<el-table-column
						        label="订单状态"
								>
								<template scope="scope">
								    <span v-if="scope.row.orderState == 'C' ">交易关闭</span>
									<span v-if="scope.row.orderState == 'W' ">交易完成</span>
									<span v-if="scope.row.orderState == 'Z' ">交易中</span>
									<span v-if="scope.row.orderState == '123' ">测试</span>
								</template>
						</el-table-column>
					</el-table>
					<div class="paginate">
					    <el-pagination
					            @current-change="handleCurrentChange3"
					            :current-page="pageInfo3.pageNum"
					            :page-size="pageInfo3.pageSize"
					            layout="total, prev, pager, next, jumper"
					            :total="pageInfo3.count"
					            >
					    </el-pagination>
					</div>
				</el-tab-pane>
			  </el-tabs>
		</div>
	
	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				value: '',
						table_loading: false,
						formInline: {
						    userName:'',
							userId: '',
							userNum: '',
							changeType: '0',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10
						},
						formInline2: {
						    userName:'',
							userId: '',
							userNum: '',
							changeType: '1',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10
						},
						orderStatList: [
							{
							value: 'C',
							label: '交易关闭'
							},
							{
							value: 'W',
							label: '交易完成'
							},
							{
							value: 'Z',
							label: '交易中'
							},
						],
						formInline3: {
						    userName:'',
							userId: '',
							userNum: '',
							changeType: '1',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10,
							orderStat: ''
						},
						type: '',
						pageInfo: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						pageInfo2: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						pageInfo3: {
						    pageNum: 1,
						    pageSize: 10,
						    count: 1,
						    dtos:[]
						},
						formActStatList: [
							{
								value: 'B',
								label: '审核中'
							},
							{
								value: 'L',
								label: '平台拒绝'
							},
							{
								value: 'P',
								label: '平台通过'
							},
							{
								value: 'F',
								label: '快捷通拒绝'
							},
							{
								value: 'S',
								label: '通过'
							}
						],
						moneyInfo: [
							{
								userName: '',
								sumIncomeToday: '',
								sumIncome: ''
							}
						]
			}
		},
		created() {

		},
		activated() {
			this.activeName = 'first'
		    this.fetchData(1);
			this.getCountUserNext()
		},
		methods: {
			goBack(){
				this.$router.push({path:"/user/creator_detail/",query:{id:this.$route.params.id}})
				// this.$router.push('/user/creator_detail/' +$route.query.id)
			},
			changeType() {
				console.log('change创客筛选条件')
			},
			handleClick(tab, event) {
				if(this.activeName == 'first') {
					this.fetchData(1);
					this.formInline3 = {
						    userName:'',
							userId: '',
							userNum: '',
							changeType: '1',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10,
							orderStat: ''
						}
				}
				if (this.activeName == 'second') {
					this.fetchData2(1);
					this.formInline3 = {
						    userName:'',
							userId: '',
							userNum: '',
							changeType: '1',
						    sort:'CRE_TIME',
						    desc:'DESC',
						    pageNum:1,
						    pageSize: 10,
							orderStat: ''
						}
				}
				if (this.activeName == 'third') {
					this.fetchData3(1);
				}
			},
			// 商品收入
			fetchData(page = 1) {
				let rid =this.$route.params.id
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.formInline.userId = rid
			    this.table_loading = true;
			    this.dataApi.ajax('markerIncomeList',this.formInline, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo = res
						// console.log(this.pageInfo,'商品收入')
			        }
			    });
			
			},
			// 创客收入
			fetchData2(page = 1) {
				let rid =this.$route.params.id
				this.pageInfo2.pageNum = page
				this.formInline2.pageNum = this.pageInfo2.pageNum
				this.formInline2.userId = rid
			    this.table_loading = true;
			    this.dataApi.ajax('markerIncomeList',this.formInline2, res => {
			    this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo2 = res
						// console.log(this.pageInfo2,'创客收入')
			        }
			    });
			
			},
			// 订单明细
			fetchData3(page = 1) {
				let rid =this.$route.params.id
				this.pageInfo3.pageNum = page
				this.formInline3.pageNum = this.pageInfo3.pageNum
				this.formInline3.userId = rid
			    this.table_loading = true;
				console.log(this.formInline3)
			    this.dataApi.ajax('markerOrder',this.formInline3, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo3 = res
						// console.log(this.pageInfo3,'订单明细')
			        }
			    });
			
			},
			/**
			 * 方法说明
			 * author: liuchen
			 * description: 获取创客邀请统计数据
			 * @param 
			 * @return 
			 * @createTime: 2020/7/22
			 */
			getCountUserNext() {
				let rid =this.$route.params.id
			    this.table_loading = true;
			    this.dataApi.ajax('countUserNext',{userId: rid}, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			           // console.log(res,'创客邀请统计')
			        }
			    });
			},
			handleCurrentChange(val) {
			   this.fetchData(val)            
			},
			handleCurrentChange2(val) {
			   this.fetchData2(val)            
			},
			handleCurrentChange3(val) {
			   this.fetchData3(val)            
			},
		}
	}
</script>

<style>
	.el-tabs__item{
		font-size: 18px;
		
	}
</style>
